<template>
  <div class="main-box w-full h-full">
    <div class="w-full top_box">
      <BorderBox11 :title="$t('common.FilmTemp')" style="height: 50%">
        <!-- <span class="card_title1 block text-white">{{ $t('common.FilmTempering') }}</span> -->
        <div class="w-full h-full" style="padding-top: 55px">
          <div class="card_box card_box1 w-full">
            <itemBoxThree v-for="item in detailsTH" :key="item.name" :item="item" style="width: 30%"/>
          </div>
<!--          <div class="card_box card_box1 w-full" style="height: 40%">-->
<!--            <itemBoxThree v-for="item in detailsLMHH" :key="item.name" :item="item" style="width: 30%"/>-->
<!--            <div style="width: 30%"></div>-->
<!--          </div>-->
        </div>

      </BorderBox11>
      <BorderBox11 :title="$t('common.FilmTempering')" style="height: 50%">
        <!-- <span class="card_title1 block text-white">{{ $t('common.FilmTempering') }}</span> -->
        <div class="w-full h-full" style="padding-top: 55px">

          <div class="card_box card_box1 w-full">
            <itemBoxThree v-for="item in detailsLMHH" :key="item.name" :item="item" style="width: 30%"/>
            <div style="width: 30%"></div>
          </div>
        </div>

      </BorderBox11>
    </div>
    <div class="w-full center_box">
      <BorderBox11 :title="$t('common.RunTime')">
        <!-- <span class="card_title2 block text-white">{{$t('common.RunTime')}}</span> -->
        <v-chart ref="currentRef" />
      </BorderBox11>
    </div>
    <div class="w-full bottom_box">
      <BorderBox11 :title="$t('ems.finishing')">
        <!-- <span class="card_title3 block text-white">{{$t('ems.finishing')}}</span> -->
        <div class="card_box card_box3 w-full justify-around" style="padding-top: 60px">
          <itemBoxThree
            v-for="item in detailsJJG"
            :key="item.name"
            :item="item"
            style="width: 30%"
          />
        </div>
      </BorderBox11>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import itemBoxTow from "./itemBoxTow.vue";
import itemBoxThree from "./itemBoxThree.vue";
import * as echarts from "echarts/core";
import { defineProps } from "vue";
import { BorderBox11 } from "datav-vue3";
import { getRunInfo } from "../ProductionLineApi";
import moment from "moment";
//接收组件传值
const props = defineProps({
  detailsTH: {
    type: Array,
    required: true,
    default: () => [],
  },
  detailsJJG: {
    type: Array,
    required: true,
    default: () => [],
  },
  detailsLMHH: {
    type: Array,
    required: true,
    default: () => [],
  },
});

const currentRef = ref();
const runTimes = ref([]);

const renderOption = (option) => {
  return {
    backgroundColor: "rgba(0, 0, 0, 0)",
    grid: {
      left: 30,
      right: 25,
      bottom: 15,
      top: 65,
      containLabel: true,
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return params.data.name + " : " + params.data.value;
      },
    },

    xAxis: {
      show: true,
      type: "category",
      data: runTimes.value.map((item) => {
        return item.name;
      }),
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.2)",
          type: "solid",
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#FFF",
        fontSize: 14,
        rotate: 45,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "value",
        axisLabel: {
          show: true,
          margin: 10, //右侧y轴数字的外边距
          textStyle: {
            fontSize: 14,
            fontWeight: 700,
            color: "rgba(255,255,255,1)",
          },
          formatter: (value) => {
            return value;
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(233, 249, 248, 0.2)",
            type: "dashed",
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(233, 249, 248, 0.2)",
          },
        },
      },
    ],
    series: [
      {
        name: "数量",
        type: "bar",
        zlevel: 1,
        showBackground: true,
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "rgba(8, 101, 91, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 255, 238, 1)",
              },
            ]),
          },
        },
        barWidth: 24,
        data: runTimes.value,
      },
    ],
  };
};
const getData = async () => {
  const res = await getRunInfo({
    beginTime: moment().format("YYYY-MM-DD 00:00:00"),
    endTime: moment().format("YYYY-MM-DD 23:59:59"),
  });
  if (res.code === 200) {
    if (!res.result.runTimes?.length) return;
    runTimes.value = res.result.runTimes?.map((item) => {
      const match = item.lineCode.match(/Line(\d+)/);
      const lineNumber = match ? match[1].padStart(2, "0") : "00";
      return {
        value: Number(item.timeStr),
        name: item.lineCode,
      };
    });
  }
};
onMounted(async () => {
  await getData();
  if (currentRef.value) {
    currentRef.value.setOption(renderOption());
  }
});
</script>

<style scoped lang="scss">
.main-box:before {
  position: absolute;
  top: 4%;
  right: 0;
  width: 5.2%;
  height: 12%;
  background: url(../images/circle.png) no-repeat;
  background-size: cover; /* 修改为cover以确保图片适应元素 */
  content: "";
}

.top_box {
  // background: url("../images/bor1_4.png") no-repeat;
  //background-size: cover; /* 修改为cover以确保图片适应元素 */
  // background-size: 100% 100%;
  height: 34%;
  // padding-top: 5px;
}
.card_box {
  display: flex;
  height: 77%;
  padding: 0 0 0 13px;
}
.card_box1 {
  height: 70%;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
  //flex-direction: column;
}
.card_box3 {
  height: 92%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

.center_box {
  // background: url("../images/bor1_5.png") no-repeat;
  //background-size: cover; /* 修改为cover以确保图片适应元素 */
  // background-size: 100% 100%;
  height: 30%;
  display: flex;
  flex-direction: column;
}

.bottom_box {
  // background: url("../images/bor1_6.png") no-repeat;
  //background-size: cover; /* 修改为cover以确保图片适应元素 */
  // background-size: 100% 100%;
  height: 36%;
}
//.card_title1,
//.card_title2,
//.card_title3 {
//  font-size: 25px;
//  font-weight: 700;
//  //background: url("../images/titBg.png") no-repeat;
//  background: url("../images/link-on.png") no-repeat;
//  background-size: 100% 100%;
//  text-align: center;
//}
//.card_title1 {
//  height: 60px;
//  width: 275px;
//  line-height: 60px;
//  margin-left: 14px;
//}
//.card_title2 {
//  height: 60px;
//  width: 370px;
//  line-height: 60px;
//  margin-left: 40px;
//}
//.card_title3 {
//  height: 68px;
//  width: 275px;
//  line-height: 68px;
//  margin-left: 14px;
//  margin-top: -9px;
//}
</style>
